<template>
  <div class="sq-layout-header-left">
    <span class="sq-header-switch" @click="isCollapse = !isCollapse">
      <el-icon v-if="isCollapse" color="#808695" :size="24"><Expand /></el-icon>
      <el-icon v-else color="#808695" :size="24"><Fold /></el-icon>
    </span>
    <BreadCrumb></BreadCrumb>
  </div>
  <div class="sq-layout-header-right">
    <span class="sq-layout-header-action__item fullscreen-item" @click="fullScreen"
      ><span class="sq-icon" @click="fullScreen">
        <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
          <el-button>
            <el-icon style="font-size: 16px; color: #808695"><FullScreen /></el-icon
          ></el-button>
        </el-tooltip> </span
    ></span>
    <span class="sq-menu"
      ><el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :size="25" :src="circleUrl" />
          {{ username }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              ><el-icon><Tools /></el-icon>用户设置</el-dropdown-item
            >
            <el-dropdown-item @click="loginOut"
              ><el-icon><CaretLeft /></el-icon>退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from 'vue'
import screenfull from 'screenfull'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router'
import { useUserStore } from '@/stores/user.js'
import BreadCrumb from '@/components/common/BreadCrumb.vue'
export default {
  components: { BreadCrumb },
  setup() {
    const state = reactive({
      count: 0,
      username: localStorage.getItem('userName'),
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    })
    const store = useUserStore()

    // 1.是否折叠
    const { isCollapse } = toRefs(store)
    const fullScreen = () => {
      if (!screenfull.isEnabled) {
        ElMessage.warning('您的浏览器不支持全屏')
        return false
      } else {
        screenfull.toggle()
      }
    }
    // 3.退出登录
    const loginOut = () => {
      ElMessageBox.confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          ElMessage.success('退出成功!')
          router.push('/login')
          localStorage.clear()
          sessionStorage.clear()
        })
        .catch(() => {})
    }

    return {
      isCollapse,
      fullScreen,
      loginOut,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
